<template>
  <div class="">
    <Filterelement
      WhichPage="配置管理"
      @searchBtn="handleQuery"
      @reset="resetQuery"
      :Params="Params"
      @socialConfigImport="socialConfigImport"
      @payConfigImport="payConfigImport"
      @socialConfigDown="socialConfigDown"
      @payConfigDown="payConfigDown"
      :userList="[]"
    />
    <div
      style="
        background-color: #fff;
        margin: 10px 20px 20px;
        padding: 16px;
        position: relative;
      "
    >
      <div class="tableHeader">
        <div class="line"></div>
        <div class="tableHeaderText">导入数据列表</div> &nbsp;
        <el-tooltip
        style="font-size: 18px !important;margin-left: 5px;"
        class="box-item"
        effect="light"
        content="修改薪酬&社保配置可将上期配置数据下载后修改，修改完毕重新导入即可。重新导入的文档会将之前的文档完全覆盖，不会在原有的配置基础上新增。"
        placement="right"
      >
      <el-icon style="background-color: #fff;"><QuestionFilled /></el-icon>
      </el-tooltip>
      </div>

      <el-table
        v-loading="loading"
        :data="configList"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ color: '#fff' }"
        height="310"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="导入人" align="center" prop="importUserName" />
        <el-table-column
          label="导入时间"
          align="center"
          prop="importTime"
          width="180"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.importTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="导入文档类别"
          align="center"
          prop="fileType"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span>{{
              scope.row.fileType == 1 ? "社保配置数据" : "薪酬配置数据"
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="附件" align="center" prop="fileName">
          <template #default="scope">
            <span style="color: #4781be">{{ scope.row.fileName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button color="#3175BE" @click="handleDown(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 导入弹窗 -->
    <el-dialog
      :title="title"
      v-model="open"
      width="800px"
      height="800px"
      append-to-body
      align-center
      draggable
      :before-close="cancel"
    >
      <el-form ref="configRef" :model="form" label-position="left" align-center>
        <el-upload
          ref="upload"
          v-model:file-list="wenjian"
          class="upload-demo"
          action=""
          :on-change="handleChange()"
          :on-exceed="handleExceed"
          :on-remove="handeRemove"
          :http-request="handleUpload"
          drag
          multiple
          :limit="1"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            "
          >
            <el-button text
              ><el-icon><Plus /></el-icon
            ></el-button>
            <span
              style="
                font-size: 14px;
                text-align: center;
                font-weight: 600;
                margin-top: 50px;
              "
              >点击或拖拽文件到此处上传
            </span>
            <span style="font-size: 12px; text-align: center; margin-top: 10px"
              >（仅支持导入xlsx格式，请下载社保模板后导入）
            </span>
          </div>

          <!-- <template #tip>
                            <div class="el-upload__tip">
                                (支持上传xlsx、jpg等格式)
                            </div>
                        </template> -->
        </el-upload>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            color="#3175BE"
            :disabled="!wenjian?.length > 0"
            @click="submitForm"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup >
import { list, socialImport } from "@/api/config/index";
import Filterelement from "../zujian/filterelement";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
import download from "../../../plugins/download.js";
import { ref } from "vue";
import { genFileId } from "element-plus";
const urlParams = new URLSearchParams(window.location.search);
const roleName = urlParams.get("roleName");
const userName = urlParams.get("userName");

// 在控制台打印 id 和 name 的值
// console.log("Received roleName:", roleName);
// console.log("Received userName:", userName);
const wenjian = ref(); //文件流
const configList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(2);
const title = ref("");
const dateRange = ref([]);
// const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
// 1：社保配置数据 2：薪酬配置数据
const fileTypeData = ref([
  {
    value: "2",
    label: "薪酬配置数据",
  },
  {
    value: "1",
    label: "社保配置数据",
  },
]);
const data = reactive({
  form: {},
  queryParams: {
    // pageNum: 1,
    // pageSize: 10,
    importTime: undefined,
    configType: undefined,
  },
  Params: {
    importEndTime: undefined,
    importStartTime: undefined,
    configType: undefined,
  },
  rules: {
    configName: [
      { required: true, message: "参数名称不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules, Params } = toRefs(data);

/** 查询参数列表 */
function getList() {
  loading.value = true;
  console.log(data.Params);
  list(data.Params).then((response) => {
    configList.value = response.data.items;
    total.value = response.data.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    fileType: "",
    file: "",
  };
  wenjian.value = [];
  proxy.resetForm("configRef");
}
/** 搜索按钮操作 */
function handleQuery(importTime) {
  // queryParams.value.pageNum = 1;
  if (importTime.value[0]) {
    data.Params.importStartTime = importTime.value[0];
    data.Params.importEndTime = importTime.value[1];
  }
  getList();
}
/** 重置按钮操作 */
function resetQuery(importTime) {
  if (!importTime.value[0]) {
    data.Params.importStartTime = "";
    data.Params.importEndTime = "";
  }
  data.Params = {
    importStartTime: "",
    importEndTime: "",
    configType: "",
  };
  handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.configId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/config/export",
    {
      ...queryParams.value,
    },
    `config_${new Date().getTime()}.xlsx`
  );
}
// 导入社保配置数据
function socialConfigImport() {
  open.value = true;
  title.value = "导入社保配置数据";
  data.form.fileType = 1;
}
//
const handleUpload = () => {};
const upload = ref();

const handleExceed = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};
const handeRemove = () => {
  wenjian.value = [];
};
const handleChange = () => {
  // console.log(TaxRate.value, qw, "form.annex");
  console.log(wenjian.value, "wenjian.value");
};
//
const submitForm = () => {
  var paramss = {
    fileType: data.form.fileType,
    file: wenjian.value[0].raw,
  };
  socialImport(paramss).then((res) => {
    console.log(res);
    if (res.code == 200) {
      wenjian.value = [];
      open.value = false;
      ElMessage({
        message: "操作成功！",
        grouping: true,
        type: "success",
      });
      getList();
    } else {
      ElMessage({
        message: "操作失败！",
        grouping: true,
        type: "error",
      });
    }
  });
};
// 导入薪酬配置数据
function payConfigImport() {
  open.value = true;
  title.value = "导入薪酬配置数据";
  data.form.fileType = 2;
}
// 下载社保配置模板
function socialConfigDown() {
  const resource = `社保配置模板.xlsx`;
  // 默认方法
  download.name(resource);
}
// 导入社保配置数据
function payConfigDown() {
  const resource = `薪酬配置模版.xlsx`;
  // 默认方法
  download.name(resource);
}

// 表格下载
function handleDown(row) {
  // ElMessage({
  //   message: "该功能暂未开放",
  //   grouping: true,
  //   type: "warning",
  // });
  // var elink = document.createElement("a");
  // var name = "其他费用管理";
  // elink.download = name;
  // elink.style.display = "none";
  // var blob = new Blob([row.fileUrl], {
  //   type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  // });
  // elink.href = URL.createObjectURL(blob);
  // document.body.appendChild(elink);
  // elink.click();
  // document.body.removeChild(elink);
  // 打开页面下载
  const fileUrl = row.fileUrl;
  // 使用 window.open 进行文件下载
  window.open(fileUrl, "_blank");
}

getList();
</script>
<style lang='scss'  scoped>
.formBox {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
}
.tableHeader {
  width: 100%;
  font-size: 20px;
  height: 35px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  .line {
    width: 4px;
    height: 18px;
    background-color: #2e70b6;
    margin-right: 4px;
  }
  .tableHeaderText {
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
